<template>
  <div class="profile-page">
    <!-- 头部用户信息 -->
    <div class="user-header">
      <div class="user-info">
        <div class="info-leftbox">
          <div class="user-avatar-wrapper">
            <van-image
              :src="userInfo.vipImg || profileImage"
              class="user-avatar"
              round
            />
          </div>
          <div class="user-details">
            <div class="user-name" @click="navigateTo('/user/profile')">
              {{ userInfo.nikename || "***" }}
              <span style="display: block"
                >ID: {{ userInfo.recomcode || "***" }}</span
              >
            </div>
            <!-- <div class="user-vipstatus">
              <div class="status-item" @click="navigateTo('/console/svipopen')">
                <img src="@/assets/images/user/svip_noopen.png" alt="Masuk" />
              </div>
            </div> -->
          </div>
        </div>

        <!-- <div class="notification" @click="navigateTo('/user/messagelist')">
          <img
            src="@/assets/images/user/iconInfo.png"
            class="notification-icon"
          />
        </div> -->
      </div>

      <!-- VIP等级 -->
      <div class="vip-info-card">
        <div class="progress-section">
          <div class="progress-bar">
            <div class="progress-bg"></div>
            <div
              class="progress-line"
              :style="{ width: `${vipProgressPercent}%` }"
            ></div>
          </div>
        </div>

        <div class="level-row">
          <div class="level-container">
            <div class="level-text">
              {{ t("user-vipdetail_viptitle") }} VIP
              {{ userInfo.minlevel || 0 }}
            </div>
          </div>

          <div class="upgrade-container">
            <div class="upgrade-btn" @click="navigateTo('/user/vip-detail')">
              <div>{{ t("profile_upgrade") }}</div>
              <div>
                <img
                  src="@/assets/images/user/up.png"
                  alt="Upgrade"
                  class="upgrade-icon"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 余额信息 -->
      <div class="balance-info">
        <div class="balance-item">
          <div class="balance-label">{{ t("profile_walletDeposit") }}</div>
          <div class="balance-value">
            COP {{ formatNumber(userInfo.inusable || 0) }}
          </div>
        </div>
        <div class="divider"></div>
        <div class="balance-item">
          <div class="balance-label">{{ t("profile_walletIncome") }}</div>
          <div class="balance-value">
            COP {{ formatNumber(userInfo.yuusable || 0) }}
          </div>
          <div class="refresh-icon" @click="navigateTo('/user/balancerecord')">
            <img src="@/assets/images/user/iconTime.png" alt="refresh" />
          </div>
        </div>
      </div>

      <div class="statistics-sheet-container" v-show="isStatisticsExpanded">
        <!-- 统计信息面板 -->
        <StatisticsSheet
          :is-expanded="isStatisticsExpanded"
          :total-deposit="formatNumber(userInfo.totalIn || 0)"
          :total-income="formatNumber(userInfo.totalIncome || 0)"
          :yesterday-income="formatNumber(userInfo.yesTodayIncome || 0)"
          :today-income="
            formatNumber(userInfo.todayIncome || 0)
          "
          :team-members="formatNumber(userInfo.direct_people || 0)"
          :available-slots="7"
          :chart-data="statisticsInfo || []"
          @close="isStatisticsExpanded = false"
        />
      </div>
      <!-- 展开图标 -->
      <div
        class="expand-icon"
        @click="showCheatSheet()"
        :class="{ 'is-expanded': isStatisticsExpanded }"
      >
        <img src="@/assets/images/user/iconBot.png" alt="expand" />
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-grid">
      <div class="menu-item" @click="showMasuk">
        <img src="@/assets/images/user/iconSvip8.png" alt="Masuk" />
        <span>{{ t("profile_masuk") }}</span>
      </div>
      <!-- <div class="menu-item" @click="navigateTo('/user/checkin')">
        <img src="@/assets/images/user/check-in.png" alt="Pendaftaran" />
        <span>{{ t("profile_checkin") }}</span>
      </div> -->
      <div class="menu-item" @click="navigateTo('/user/gpu')">
        <img src="@/assets/images/user/iconSvip1.png" alt="Produk" />
        <span> {{ t("products") }}</span>
      </div>
      <div class="menu-item" @click="navigateTo('/user/team')">
        <img src="@/assets/images/user/iconSvip2.png" alt="Tim" />
        <span>{{ t("profile_team") }}</span>
      </div>
      <div class="menu-item" @click="navigateTo('/user/invite')">
        <img src="@/assets/images/user/iconSvip3.png" alt="Undang" />
        <span>{{ t("profile_invite") }}</span>
      </div>
      <div class="menu-item" @click="navigateTo('/user/gift')">
        <img src="@/assets/images/user/iconSvip4.png" alt="Hadiah" />
        <span>{{ t("profile_gift") }}</span>
      </div>
      <div class="menu-item" @click="navigateTo('/user/bank')">
        <img src="@/assets/images/user/bank.png" alt="Bank" />
        <span>{{ t("profile_bank") }}</span>
      </div>
      <!-- <div class="menu-item" @click="navigateTo('/user/coupon')">
        <img src="@/assets/images/user/iconSvip5.png" alt="Kupon" />
        <span>{{ t("user-coupon") }}</span>
      </div> -->
      <div class="menu-item" @click="navigateTo('/user/online')">
        <img src="@/assets/images/user/online.png" alt="Manajer" />
        <span>{{ t("user-online") }}</span>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <button
        class="action-btn withdraw"
        @click="navigateTo('/user/withdrawal')"
      >
        {{ t("user-withdrawal") }}
      </button>
      <button class="action-btn deposit" @click="navigateTo('/user/recharge')">
        {{ t("user-recharge") }}
      </button>
    </div>

    <!-- 底部选项 -->
    <div class="bottom-section">
      <div class="section-title">
        <div class="title-icon"></div>
        <span>{{ t("profile_settings") }}</span>
      </div>

      <div class="settings-menu">
        <div class="settings-item" @click="navigateTo('/user/profile')">
          <div class="settings-icon">
            <img src="@/assets/images/user/profile.png" alt="Profil" />
          </div>
          <span>{{ t("profile") }}</span>
        </div>

        <div class="settings-item" @click="navigateTo('/user/password')">
          <div class="settings-icon">
            <img src="@/assets/images/user/iconSetting1.png" alt="Kata sandi" />
          </div>
          <span>{{ t("profile_password") }}</span>
        </div>

        <div class="settings-item" @click="navigateTo('/user/faq')">
          <div class="settings-icon">
            <img src="@/assets/images/user/iconSetting3.png" alt="FAQ" />
          </div>
          <span>{{ t("user-faq") }}</span>
        </div>

        <div class="settings-item" @click="navigateTo('/user/rule')">
          <div class="settings-icon">
            <img src="@/assets/images/user/iconSetting4.png" alt="Aturan" />
          </div>
          <span>{{ t("profile_rule") }}</span>
        </div>

        <div class="settings-item" @click="logout">
          <div class="settings-icon">
            <img src="@/assets/images/user/iconSetting5.png" alt="Keluar" />
          </div>
          <span>{{ t("profile_logout") }}</span>
        </div>
      </div>
    </div>

    <!-- 使用签到弹窗组件 -->
    <MasukPopup
      v-model:show="showPopup"
      :user-level="userInfo.minlevel"
      @claimed="handleRewardClaimed"
    />
  </div>
</template>

<script setup lang="ts">
import profileImage from "@/assets/images/logo_icon.png";
import MasukPopup from "@/components/MasukPopup.vue";
import StatisticsSheet from "@/components/StatisticsSheet.vue";
import { useUserStore } from "@/stores";
import { showDialog, showToast, Image as VanImage } from "vant";
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { formatNumber } from "@/utils/public";
import { getMyIncomeList } from "@/api/user";
const router = useRouter();
const userStore = useUserStore() as any;
const showPopup = ref(false);
const { t } = useI18n();
const statisticsInfo = ref([]);
// 用户信息从store中获取
const userInfo = computed(() => userStore.userInfo || {}) as any;

// 备用的本地数据，当store中没有数据时使用
const localUserInfo = reactive({
  level: 1,
  isVip: true,
  vipExp: 75, // 当前经验值
  vipExpRequired: 100, // 升级所需经验值
});

// 计算VIP进度百分比
const vipProgressPercent = computed(() => {
  // 简单的固定进度，后续可根据实际VIP经验值计算
  return 75;
});

// 获取用户数据
async function getUserData() {
  try {
    // 如果store有获取用户信息的方法，调用它
    if (typeof userStore.fetchUserInfo === "function") {
      await userStore.fetchUserInfo();
    } else if (typeof userStore.getUserInfo === "function") {
      await userStore.getUserInfo();
    }
  } catch (error) {
    console.error("err:", error);
  }
}

// 获取统计
const getIncomeList = async () => {
  try {
    const res = await getMyIncomeList();
    if (res.code === 200) {
      statisticsInfo.value = res.data;
    } else {
      showToast(res.msg || t("user-coupon_noData"));
    }
  } catch (error) {
    showToast(t("products_networkError"));
  } finally {
  }
};

// 页面导航
function navigateTo(path: string) {
  router.push(path);
}

function showMasuk() {
  showPopup.value = true;
}

function handleRewardClaimed() {
  // 处理奖励领取后的逻辑
  console.log(`yes`);
}

// 退出登录
async function logout() {
  showDialog({
    title: t("userprofile_confirm"),
    message: t("userprofile_tip"),
    showCancelButton: true,
    confirmButtonText: t("userprofile_confirm"),
    cancelButtonText: t("Batal"),
    confirmButtonColor: "#d6c4a4",
  })
    .then(async () => {
      try {
        showToast({
          type: "loading",
          message: t("login_out"),
          forbidClick: true,
          duration: 0,
        });

        // 调用退出登录API
        await userStore.logout();

        showToast({
          type: "success",
          message: t("out_yes"),
        });

        // 退出登录后跳转到登录页
        router.replace("/login");
      } catch (error) {
        console.error("err:", error);
        showToast({
          type: "fail",
          message: t("out_no"),
        });
      }
    })
    .catch(() => {
      // 用户取消退出
    });
}

// 统计面板展开状态
const isStatisticsExpanded = ref(false);

function showCheatSheet() {
  isStatisticsExpanded.value = !isStatisticsExpanded.value;
}

// 页面加载时获取用户信息
onMounted(() => {
  getUserData();
  getIncomeList();
});
</script>

<style scoped lang="less">
.profile-page {
  min-height: 100%;
  background-color: #221a18;
  padding-bottom: 10px;
}

// 头部用户信息
.user-header {
  position: relative;
  padding: 20px 16px 5px 16px;
  background-image: url("@/assets/images/user/topBg.png");
  background-size: cover;
  background-position: top center;
  color: #ffffff;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
}

.info-leftbox {
  display: flex;
  align-items: center;
}

.user-avatar-wrapper {
  position: relative;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border: 2px solid #e2c4a9;
  border-radius: 50%;
  overflow: hidden;
  background: #2d2624;
}

.user-details {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  color: #f6eada;
  // display: flex;
  // align-items: center;
  gap: 5px;

  span {
    color: #f6eada;
    font-size: 16px;
  }
}

.user-vipstatus {
  .status-item {
    display: flex;
    align-items: center;

    img {
      width: 51px;
      height: 17px;
      object-fit: contain;
    }
  }
}

.notification {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 20px;
    height: 20px;
  }
}

.notification-icon {
  width: 100%;
  height: 100%;
}

// VIP等级
.vip-info-card {
  width: 100%;
  height: auto;
  margin: 15px auto 0px;
  font-size: 12px;
  background-color: rgba(254, 242, 230, 0.15);
  padding: 11px;
  border-radius: 4px;
}

.progress-section {
  margin-top: 11px;
}

.progress-bar {
  margin-bottom: 2px;
  position: relative;
  height: 6px;
  width: 100%;
}

.progress-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: rgba(34, 26, 24, 0.5);
  border-radius: 3px;
}

.progress-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  background-color: rgb(226, 196, 169);
  border-radius: 3px;
  transition: width 0.3s;
}

.level-row {
  display: flex;
  margin-top: 2px;
}

.level-container {
  width: 70%;
}

.level-text {
  text-align: left;
  min-width: 20%;
  margin-top: 11px;
  font-size: 14px;
  font-weight: normal;
  color: #f6eada;
}

.upgrade-container {
  width: 30%;
  display: flex;
  justify-content: flex-end;
}

.upgrade-btn {
  height: 28px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  color: #e2c4a9;
  border: hsla(0, 0%, 60%, 0.4) solid 0.5px;
  padding: 0px 10px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;

  img {
    width: 17px;
    height: 17px;
    margin-left: 4px;
  }
}

// 余额信息
.balance-info {
  display: flex;
  margin-top: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 10px 0;
}

.balance-item {
  flex: 1;
  padding: 0 10px;
  position: relative;
}

.divider {
  width: 1px;
  background-color: rgba(255, 255, 255, 0.1);
}

.balance-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 5px;
}

.balance-value {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}

.refresh-icon {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 20px;
  height: 20px;
  img {
    width: 20px;
    height: 20px;
  }
}

.expand-icon {
  text-align: center;
  margin-top: 10px;
  transition: transform 0.3s ease;

  &.is-expanded {
    transform: rotate(180deg);
  }

  img {
    width: 15px;
    height: 15px;
  }
}

// 功能菜单
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background-color: #f5ead8;
  border-radius: 10px;
  margin: 0 15px;
  padding: 15px 10px;
  margin-top: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;

  img {
    width: 34px;
    height: 34px;
    margin-bottom: 5px;
  }

  span {
    font-size: 12px;
    color: #333;
  }
}

// 操作按钮
.action-buttons {
  display: flex;
  margin: 15px;
  gap: 10px;
}

.action-btn {
  flex: 1;
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 500;
  border: none;
}

.withdraw {
  background-color: #221a18;
  color: #d6c4a4;
  border: 1px solid #d6c4a4;
}

.deposit {
  background: linear-gradient(to right, #d6c4a4, #b6987a);
  color: #221a18;
}

// 底部选项
.bottom-section {
  margin: 15px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  padding-left: 15px;
}

.title-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background-color: #d6c4a4;
  border-radius: 2px;
}

.section-title span {
  color: #fff;
}

.settings-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}

.settings-item {
  background-color: #2d2624;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;

  .settings-icon {
    width: 40px;
    height: 40px;
    background-color: #3a3230;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;

    img {
      width: 40px;
      height: 40px;
    }
  }

  span {
    font-size: 12px;
    color: #fff;
  }
}

// 添加统计面板容器样式
.statistics-sheet-container {
  background-color: #221a18;
}
</style>
